<template>
  <view>
    <view class="text-id" v-if="showId">id:{{id}}</view>
    <view class="text-test" v-if="text">text:{{text}}</view>
    <view class="value-test" v-if="value">value:{{value}}</view>
    <view class="obj-test" v-if="obj&&obj.text">obj.text:{{obj.text}}</view>
    <view @click="test" class="custom-test">
      <slot />
    </view>
  </view>
</template>

<script>
export default {
  props: {
    showId: {
      type: Boolean
    },
    text: {
      type: String
    },
    value: {
      type: String
    },
    obj: {
      type: Object
    }
  },
  data () {
    return {
      id: ''
    }
  },
  methods: {
    test () {
      this.$emit('click', 'custom')
    }
  },
  created () {
    this.id = String(Math.random()).substring(2, 8)
    this.$emit('update', this.id)
  }
}
</script>

<style>
</style>